/*
 * @Description: 绑定支付宝
 * @Author: kanglin
 * @Date: 2018-08-02 10:53:20
 * @Copyright: Created by Panxsoft.
 */


<style lang="less" scoped rel="stylesheet/less" type="text/less" >
	@import '~src/assets/css/common.less';

    .bind-ali-account{
        position: absolute;
        width: 100%;
		height: 100%;
		min-height: 1200 *@rem-per-px;
        background: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/h5-bg.png');
		background-size:cover;

		.background{
			position: absolute;
			width: 100%;
			height: 100%;
			background: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/account_bg.png');
			background-size: 100%;
			// background-position: bottom;
			background-repeat: no-repeat;
			min-height: 1200 *@rem-per-px;
		}

		.form{
			width: 520 *@rem-per-px;
			margin: 340*@rem-per-px auto 0;
			text-align: center;
		}

		.form__account{
			height: 30 *@rem-per-px;
			font-size: 30 *@rem-per-px;
			padding: 35 *@rem-per-px 0;
			width: 100%;
			border-radius: 10px;
			line-height: normal;
			border: 0px;
			text-align: center;
			&::-ms-input-placeholder{
				text-align: center;
			}
			&::-webkit-input-placeholder{
				text-align: center;
			}
			&:focus{
				outline: none;
			}
		}

		.form__submit{
			width: 228*@rem-per-px;
			height: 228*@rem-per-px;
			margin: 84 *@rem-per-px auto 70 *@rem-per-px;
			background-image: url('//gz.bcebos.com/v1/beauty-mirror/wx_system/lucky-money/queding_btn.png');
			background-size: 100%;
			font-size: 54 *@rem-per-px;
			color: #dc112d;
			line-height: 228*@rem-per-px;
			background-color: transparent;
			&:focus{
				outline: none;
			}
		}

		.info{
			font-size: 30 *@rem-per-px;
			color: #ffffff;
			text-align: center;
			line-height: 1.5;
		}

		.back-home{
			position: absolute;
			// background: rebeccapurple;
			display: block;
			height: 60 *@rem-per-px;
			width: 60 *@rem-per-px;
			left: 50%;
			top: 1130 *@rem-per-px;
			margin-left: -30*@rem-per-px;
		}
	}
</style>

<template>
	<div class="bind-ali-account">
		<div class="background">
			<form class="form">
				<input
					v-model="form.ali_account"
					placeholder="请输入你的支付宝账号"
					type="text"
					name="form__account"
					class="form__account">

				<input
					class="form__submit"
					type="submit"
					name="form__submit"
					value="修改"
					@click.prevent="handleSubmit">
			</form>

			<!-- <p class="info">
				测肤即可领取红包 <br>
				输入你的支付宝来领取红包吧!
			</p> -->
		</div>
		<lucky-money-dialog
			:content="content"
			:visible.sync="is_dialog_visible"
			title="温馨提示"
			@confirm="confirmSubmit"
		/>

		<a
			class="back-home"
			href="javascript:void(0);"
			@click="back"/>
	</div>
</template>

<script>
import { mapMutations, mapGetters } from 'vuex';
import { parseQueryString } from 'src/utils/helper';
import API_LIST from 'src/API_LIST';
import LuckyMoneyDialog from './dialog';

export default {
	name: 'BindaliAccount',
	components: {
		'lucky-money-dialog': LuckyMoneyDialog,
	},
	data() {
		return {
			form: {
				ali_account: null,
				_method: 'PATCH',
				appid: null,
			},
			params: {
				openid: null,
			},
			is_dialog_visible: false,
			content: '支付宝账号是否正确？',
		};
	},
	computed: {
		...mapGetters('userInfo', [
			'getUserInfo',
		]),
	},
	created() {
		this.initApiParams();
		this.form.ali_account = this.getUserInfo.ali_account;
	},
	methods: {
		/**
		 * 解析请求参数
		 * @return {undefined}
		 */
		initApiParams() {
			const { openid, appid } = parseQueryString();
			this.params.openid = openid || this.getUserInfo.openid;
			this.form.appid = appid || this.getUserInfo.appid || null;
		},

		...mapMutations('userInfo', [
			'setAliAccount',
		]),

		/**
		 * 返回首页
		 * @return {undefined}
		 */
		back() {
			this.$router.replace({ path: '/lucky-money-user-records' });
		},

		/**
		 * 提交表单
		 * @param {String} url {接口路径}、
		 * @param {String} openid {唯一标识}
		 * @param {Object} body {表单参数对象}
		 * @return {undefined}
		 */
		postForm(url, openid, body) {
			const loading_toast = this.$createToast({
				txt: '正在提交',
			});
			loading_toast.show();
			return this.$http.post(`${url}/${openid}`, body)
				.then(({ data }) => {
					if (data.code !== 0) {
						throw new Error(data.error);
					} else {
						return data;
					}
				})
				.catch((error) => {
					const toast = this.$createToast({
						type: 'warn',
						time: 3000,
						txt: error.message,
					});
					toast.show();
				})
				.then((data) => {
					loading_toast.hide();
					return data;
				});
		},

		/**
		 * 提交绑定微信的账号
		 * @return {undefined}
		 */
		handleSubmit() {
			this.is_dialog_visible = true;
		},

		/**
		 * 表单校验
		 * @return {Object} {description}
		 */
		validateForm() {
			if (!this.params.openid) {
				return { flag: false, message: '参数错误!' };
			}
			if (!this.form.ali_account) {
				return { flag: false, message: '支付账号不能为空!' };
			}
			return { flag: true, message: null };
		},

		/**
		 * 确认提交
		 * @return {undefined}
		 */
		confirmSubmit() {
			const result = this.validateForm();
			if (!result.flag) {
				const toast = this.$createToast({
					type: 'error',
					time: 2000,
					txt: result.message,
				});
				toast.show();
				return;
			}
			this.postForm(API_LIST.ALI_ACCOUNT, this.params.openid, this.form)
				.then((data) => {
					if (data) {
						this.setAliAccount(this.form.ali_account);
						const toast = this.$createToast({
							type: 'correct',
							time: 2000,
							txt: '修改成功',
						});
						toast.show();
						this.$router.push({ path: '/lucky-money-user-records' });
					}
				});
		},
	},
};
</script>
